<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>
</body>
<script>
    //一.添加功能
    //1.添加按钮绑定
    document.getElementById("add").onclick =function(){
        //2.创建行元素
        let tr =document.createElement("tr");
        //3.创建4个单元格
        let nameTd =document.createElement("td");
        let ageTd =document.createElement("td");
        let genderTd =document.createElement("td");
        let deleteTd =document.createElement("td");
        //4.将单元格放入行里面
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入的文本信息
        let name=document.getElementById("name").value;
        let age=document.getElementById("age").value;
        let gender=document.getElementById("gender").value;
        //6.获取到信息，创建文本元素
        let nameText =document.createTextNode(name);
        let ageText =document.createTextNode(age);
        let genderText =document.createTextNode(gender);
        //7.文本元素放入单元格中
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8.创建超链接，显示文本，添加href，制作删除
        let a =document.createElement("a");
        let aText =document.createElement("删除");
        a.setAttribute("href","JavaScript:void(0);");
        a.appendChild(aText);
        //9.将删除放入td
        deleteTd.appendChild(a);
        //10.获取table，将这些全部放入
        let table =document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>